<script setup lang="ts">
import Tiptap from '@/components/Tiptap/index.vue'
import { ref } from 'vue'
const richText = ref('')
const atConfig = ref({
    list:[]
})

const getRichText = () => {
    console.log('获取富文本内容', richText.value)
    
    // 解析富文本中的 mention 数据
    const parser = new DOMParser()
    const doc = parser.parseFromString(richText.value, 'text/html')
    const mentions = doc.querySelectorAll('[data-type="mention"]')
    
    mentions.forEach((mention, index) => {
        const userData = mention.getAttribute('data-user')
        const id = mention.getAttribute('data-id')
        console.log(`Mention ${index + 1}:`, {
            id,
            userData: userData ? JSON.parse(userData) : null,
            text: mention.textContent
        })
    })
}

const toggleMention = () => {
    if (atConfig.value.list.length > 0) {
        atConfig.value.list = []
        console.log('提及功能已关闭（清空数据）')
    } else {
        atConfig.value.list = [
            {
                id: '1',
                name: '张三'
            },
            {
                id: '2',
                name: '李四'
            },
            {
                id: '3',
                name: '王五'
            },
            {
                id: '4',
                name: '赵六'
            },
            {
                id: '5',
                name: '孙七'
            }
        ]
        console.log('提及功能已开启（添加数据）')
    }
}
const setMention01 = () => {
    atConfig.value.list = [
        {
            id: '1',
            name: '张三'
        },
        {
            id: '2',
            name: '李四'
        },
        
    ]
}
const setMention02 = () => {
    atConfig.value.list = [
        {
            id: '1',
            name: '基尼'
        },
        {
            id: '2',
            name: '太美'
        },
        
    ]
}
</script>

<template>
    <div class="rich">
        <Tiptap v-model="richText" :at="atConfig" />
    </div>
    <div style="margin-top: 10px;">
        <van-button type="primary" @click="getRichText">获取富文本内容</van-button>
        <van-button type="warning" @click="toggleMention" style="margin-left: 10px;">
            {{ atConfig.list.length > 0 ? '关闭' : '开启' }}提及功能
        </van-button>
        <van-button type="danger" @click="setMention01" style="margin-left: 10px;">设置提及01数据</van-button>
        <van-button type="danger" @click="setMention02" style="margin-left: 10px;">设置提及02数据</van-button>
    </div>
</template>

<style lang="scss" scoped>
.rich {
    width: 100%;
    /* height: 200px; */
}
</style>
